<template>
	<view class="diy-window" :style="{
			background: itemData.style.background,
			padding:
				itemData.style.paddingTop * 2 +
				'rpx ' +
				itemData.style.paddingLeft * 2 +
				'rpx ' +
				itemData.style.paddingBottom * 2 +
				'rpx ' +
				itemData.style.paddingLeft * 2 +
				'rpx'
		}">
		<view class="data-list" v-if="itemData.style.layout > -1" :class="'column__' + itemData.style.layout">
			<view class="item" id="item" :key="index" v-for="(item, index) 
			in itemData.data" @click="gotoPages(item)">
				<view class="item-diy">
					<view class="item-title" id="item-title">
						{{domData[index].name}}
					</view>
					<view class="item-img" :style="{height:domImH+'px'}">
						<image :src="item.imgUrl" mode="aspectFill" class="image"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="display" v-else
			:style="{ padding: itemData.style.paddingTop + 'px ' + itemData.style.paddingLeft + 'px' }">
			<view class="img-box-wrap-1">
				<view class="img-box" @click="gotoPages(itemData.data[0])">
					<image :src="itemData.data[0].imgUrl" mode="aspectFill"></image>
				</view>
			</view>
			<view class="percent-w50 d-s-c d-c">
				<view class="img-box-wrap-2" v-if="itemData.data.length >= 2">
					<view class="img-box" @click="gotoPages(itemData.data[1])">
						<image :src="itemData.data[1].imgUrl" mode="aspectFill"></image>
					</view>
				</view>
				<view class="d-s-c img-box-wrap-3">
					<view class="img-box-wrap-4" v-if="itemData.data.length >= 3">
						<view class="img-box" @click="gotoPages(itemData.data[2])">
							<image :src="itemData.data[2].imgUrl" mode="aspectFill"></image>
						</view>
					</view>
					<view class="img-box-wrap-4" v-if="itemData.data.length >= 4">
						<view class="img-box" @click="gotoPages(itemData.data[3])">
							<image :src="itemData.data[3].imgUrl" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleHeight: 0,
				domImH: 0,
				domData: {
					0: {
						name:'洋桔梗进口苗',
						url:''
					},
					1: {
						name:'预售',
						url:''
					},
					2: {
						name:'现苗秒杀',
						url:''
					},
					3: {
						name:'特惠活动',
						url:''
					}
				}
			};
		},
		props: ['itemData'],
		methods: {
			/*跳转页面*/
			gotoPages(e) {
				console.log('eee',e)
				  this.gotoPage(e.linkUrl);
			}
		},
		mounted() {
			const $this = this
			$this.$nextTick(() => {
				let title = uni
					.createSelectorQuery()
					.in(this)
					.select('#item-title');
				title.boundingClientRect(data => {
					if(data) {
				       $this.titleHeight = data.height
					}
				
				}).exec()

				let view = uni
					.createSelectorQuery()
					.in(this)
					.select('#item');
				view.boundingClientRect(data => {
					if (data) {
						const th = $this.titleHeight
						const domH = data.height
						const imgH = domH - th
						$this.domImH = imgH
					}
				}).exec()

			})
		},
		created() {

		}
	};
</script>

<style>
	.diy-window {
		overflow: hidden;
	}

	.diy-window .data-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		justify-content: space-around;
		gap: 10rpx;
	}

	.diy-window image {
		width: 100%;
		height: 100%;
	}

	.diy-window .data-list.column__2 .item {
		width: 45%;
		padding: 10rpx;

	}

	.diy-window .data-list.column__3 .item {
		width: 33.333333333333%;
	}

	.diy-window .data-list.column__4 .item {
		width: 25%;
	}

	.diy-window .data-list.column__2 .item {
		position: relative;
		padding-top: 50%;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}

	.diy-window .data-list.column__3 .item {
		position: relative;
		padding-top: 33.3333333%;
	}

	.diy-window .data-list.column__4 .item {
		position: relative;
		padding-top: 25%;
	}

	.diy-window .data-list .item .item-image,
	.diy-window .display .img-box {
		position: absolute;
		box-sizing: border-box;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.item-diy {
		position: absolute;
		box-sizing: border-box;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.item-diy .item-img {
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.item-diy .item-img .image {
		width: 90%;
		height: 90%;
		margin: 0rpx auto;
		border-radius: 5rpx;
	}
	.item-diy .item-title {
		font-size: 27rpx;
		font-weight: bold;
		padding: 15rpx 15rpx 10rpx 20rpx;
	}

	.diy-window .display {
		display: flex;
	}

	.diy-window .display .img-box-wrap-1 {
		position: relative;
		width: 50%;
		padding-top: 50%;
	}

	.diy-window .display .img-box-wrap-2 {
		position: relative;
		width: 100%;
		height: 50%;
	}

	.diy-window .display .percent-w50 {
		box-sizing: border-box;
		width: 50%;
	}

	.diy-window .display .img-box .item-image {
		height: 100%;
	}

	.diy-window .display .img-box-wrap-3 {
		width: 100%;
		height: 50%;
	}

	.diy-window .display .img-box-wrap-4 {
		position: relative;
		width: 50%;
		height: 100%;
	}
</style>